<template>
	<view class="dianpu-container">
		<!-- 自定义导航栏 -->
		<view class="custom-nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-content">
				<view class="nav-left">
					<text class="back-icon" @click="goBack">〈</text>
				</view>
				<view class="search-container">
					<!-- <text class="search-icon">Q</text> -->
					<input 
						class="search-input" 
						placeholder="请输入搜索" 
						v-model="searchKeyword"
						@confirm="searchProducts"
						@input="onSearchInput"
						@focus="onSearchFocus"
					/>
				</view>
				<view class="nav-right">
					<text class="search-btn" @click="searchProducts">搜索</text>
					<!-- <view class="nav-actions">
						<text class="action-icon">...</text>
						<text class="action-icon">-</text>
						<text class="action-icon">○</text>
					</view> -->
				</view>
			</view>
		</view>

		<!-- 店铺信息区域 -->
		<view class="shop-info">
			<view class="shop-avatar">
				<image src="/static/img/a.png" mode="aspectFill" class="avatar-img"></image>
			</view>
			<view class="shop-details">
				<view class="shop-header">
					<text class="shop-name">{{shopInfo.name}}</text>
					<view class="header-right">
						<text class="shop-arrow" @click="goToShopDetail">></text>
						<button class="follow-btn" :class="{ 'followed': isFollowed }" @click="followShop">
							<text class="follow-icon" v-if="!isFollowed">+</text>
							<text class="follow-icon" v-else>✓</text>
							<text class="follow-text">{{ isFollowed ? '已关注' : '关注' }}</text>
						</button>
					</view>
				</view>
				<view class="shop-stats">
					<text class="stats-text">{{shopInfo.followers}} 关注</text>
					<text class="stats-text">{{shopInfo.products}} 件商品</text>
				</view>
				<text class="shop-desc">{{shopInfo.description}}</text>
				<view class="shop-actions">
					<button class="service-btn" @click="contactService">
						<text class="service-icon">🎧</text>
						<text class="service-text">联系客服</text>
					</button>
				</view>
			</view>
		</view>

		<!-- 分类标签 -->
		<view class="category-tabs">
			<view 
				class="tab-item" 
				:class="{ active: activeTab === 'all' }"
				@click="switchTab('all')"
			>
				<text class="tab-text">全部商品</text>
			</view>
			<view 
				class="tab-item" 
				:class="{ active: activeTab === 'category' }"
				@click="switchTab('category')"
			>
				<text class="tab-text">分类查看</text>
			</view>
		</view>

		<!-- 分类列表 -->
		<view class="category-list" v-if="activeTab === 'category'">
			<view 
				class="category-item" 
				v-for="(category, index) in categories" 
				:key="index"
				@click="selectCategory(category)"
			>
				<text class="category-name">{{category.name}}</text>
				<text class="category-arrow">></text>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="product-list" v-if="activeTab === 'all'">
			<!-- 搜索结果提示 -->
			<view class="search-result-tip" v-if="searchKeyword && searchProducts.length > 0">
				<text class="tip-text">搜索"{{searchKeyword}}"的结果 ({{searchProducts.length}}条)</text>
				<text class="clear-search" @click="clearSearch">清除搜索</text>
			</view>
			<view class="product-grid">
				<view 
					class="product-item" 
					v-for="(product, index) in (searchKeyword ? searchProducts : products)" 
					:key="index"
					@click="viewProduct(product)"
				>
					<view class="product-image">
						<image :src="product.image" mode="aspectFill" class="product-img"></image>
					</view>
					<view class="product-info">
						<text class="product-name">{{product.name}}</text>
						<view class="product-price">
							<text class="price-symbol">¥</text>
							<text class="price-value">{{product.price}}</text>
						</view>
						<view class="product-stats">
							<text class="coupon-tag">券</text>
							<text class="sales-text">已售 {{product.sales}}</text>
							<text class="review-text">{{product.reviews}}条评论</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度
				isFollowed: false, // 关注状态
				activeTab: 'all', // 当前选中的标签
				shopInfo: {
					id: '', // 店铺ID
					name: '杭州酒小二x123',
					followers: 228,
					products: 112,
					description: '杭州酒小二杭州酒小二杭州酒小二'
				},
				categories: [
					{ id: 1, name: '新品推荐' },
					{ id: 2, name: '潮流耳机' },
					{ id: 3, name: '手机数码' },
					{ id: 4, name: '电脑办公' }
				],
				products: [
					{
						id: 1,
						name: '小米 (MI) Redmi K30 至尊纪念版',
						price: '3000.00',
						sales: 2,
						reviews: 0,
						image: '/static/img/a.png'
					},
					{
						id: 2,
						name: '朵唯(DOOV) X11Pro 安卓智能手机',
						price: '4542.00',
						sales: 2,
						reviews: 2,
						image: '/static/img/a.png'
					},
					{
						id: 3,
						name: '无线蓝牙耳机',
						price: '299.00',
						sales: 15,
						reviews: 8,
						image: '/static/img/a.png'
					},
					{
						id: 4,
						name: 'OnePlus 智能手机',
						price: '3999.00',
						sales: 5,
						reviews: 3,
						image: '/static/img/a.png'
					}
				],
				searchKeyword: '', // 搜索关键词
				searchProducts: [] // 搜索结果
			}
		},
		onLoad(options) {
			// 获取状态栏高度
			this.getStatusBarHeight()
			// 接收页面参数
			if (options.shopId) {
				this.shopInfo.id = options.shopId
			}
			if (options.shopName) {
				this.shopInfo.name = decodeURIComponent(options.shopName)
			}
			// 页面加载时获取数据
			this.getShopInfo()
			this.getCategories()
			this.getProducts()
		},
		methods: {
			// 获取状态栏高度
			getStatusBarHeight() {
				const systemInfo = uni.getSystemInfoSync()
				this.statusBarHeight = systemInfo.statusBarHeight
			},
			
			// 返回上一页
			goBack() {
				// 获取页面栈信息
				const pages = getCurrentPages()
				if (pages.length > 1) {
					// 如果有上一页，返回上一页
					uni.navigateBack({
						delta: 1
					})
				} else {
					// 如果没有上一页，跳转到首页
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			
			// 跳转到店铺详情页
			goToShopDetail() {
				// 跳转到营业执照页面
				uni.navigateTo({
					url: '/pages/dianpujiesao/dianpujiesao'
				})
			},
			
			// 获取店铺信息
			getShopInfo() {
				// TODO: 调用后端接口获取店铺信息
				// uni.request({
				// 	url: 'your-api-url/shop/info',
				// 	method: 'GET',
				// 	data: {
				// 		shopId: this.shopInfo.id
				// 	},
				// 	success: (res) => {
				// 		this.shopInfo = res.data
				// 	}
				// })
			},
			
			// 获取分类列表
			getCategories() {
				// TODO: 调用后端接口获取分类列表
				// uni.request({
				// 	url: 'your-api-url/categories',
				// 	method: 'GET',
				// 	success: (res) => {
				// 		this.categories = res.data
				// 	}
				// })
			},
			
			// 获取商品列表
			getProducts() {
				// TODO: 调用后端接口获取商品列表
				// uni.request({
				// 	url: 'your-api-url/products',
				// 	method: 'GET',
				// 	success: (res) => {
				// 		this.products = res.data
				// 	}
				// })
			},
			
			// 切换标签
			switchTab(tab) {
				this.activeTab = tab
			},
			
			// 关注店铺
			followShop() {
				// TODO: 调用后端接口关注店铺
				// uni.request({
				// 	url: 'your-api-url/shop/follow',
				// 	method: 'POST',
				// 	data: { shopId: this.shopInfo.id },
				// 	success: (res) => {
				// 		this.isFollowed = !this.isFollowed
				// 		uni.showToast({
				// 			title: this.isFollowed ? '关注成功' : '取消关注',
				// 			icon: 'success'
				// 		})
				// 	}
				// })
				
				// 切换关注状态
				this.isFollowed = !this.isFollowed
				uni.showToast({
					title: this.isFollowed ? '关注成功' : '取消关注',
					icon: 'success'
				})
			},
			
			// 联系客服
			contactService() {
				// 跳转到客服页面，传递店铺信息
				uni.navigateTo({
					url: `/pages/lianxikefu/lianxikefu?shopName=${encodeURIComponent(this.shopInfo.name)}&shopId=${this.shopInfo.id || 'default'}`
				})
			},
			
			// 选择分类
			selectCategory(category) {
				// 跳转到分类页面
				let categoryType = ''
				switch(category.name) {
					case '新品推荐':
						categoryType = 'new'
						break
					case '潮流耳机':
						categoryType = 'headphone'
						break
					case '手机数码':
						categoryType = 'mobile'
						break
					case '电脑办公':
						categoryType = 'computer'
						break
					default:
						categoryType = 'new'
				}
				
				uni.navigateTo({
					url: `/pages/fenleichakan/fenleichakan?category=${categoryType}`
				})
			},
			
			// 查看商品详情
			viewProduct(product) {
				// TODO: 跳转到商品详情页
				uni.showToast({
					title: `查看${product.name}`,
					icon: 'none'
				})
			},

			// 搜索输入框输入事件
			onSearchInput(e) {
				console.log("搜索输入",e.detail.value)
				this.searchKeyword = e.detail.value
			},

			// 搜索输入框聚焦事件
			onSearchFocus() {
				this.searchProducts = [] // 清空搜索结果
			},

			// 搜索按钮点击事件
			searchProducts() {
				if (!this.searchKeyword) {
					uni.showToast({
						title: '请输入搜索关键词',
						icon: 'none'
					})
					return
				}
				// TODO: 调用后端接口进行搜索
				// uni.request({
				// 	url: 'your-api-url/products/search',
				// 	method: 'GET',
				// 	data: { keyword: this.searchKeyword },
				// 	success: (res) => {
				// 		this.searchProducts = res.data
				// 	}
				// })
				console.log('搜索关键词:', this.searchKeyword)
				// 模拟搜索结果
				this.searchProducts = this.products.filter(product => 
					product.name.includes(this.searchKeyword)
				)
				uni.showToast({
					title: `搜索到 ${this.searchProducts.length} 条结果`,
					icon: 'none'
				})
			},

			// 清除搜索
			clearSearch() {
				this.searchKeyword = ''
				this.searchProducts = []
				uni.showToast({
					title: '已清除搜索',
					icon: 'none'
				})
			}
		}
	}
</script>

<style scoped>
	.dianpu-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 自定义导航栏样式 */
	.custom-nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 999;
		border-bottom: 1rpx solid #eee;
	}

	.nav-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		height: 88rpx;
	}

	.nav-left {
		display: flex;
		align-items: center;
	}

	.back-icon {
		font-size: 36rpx;
		color: #333;
		margin-right: 20rpx;
	}

	.search-container {
		flex: 1;
		display: flex;
		align-items: center;
		background-color: #f8f8f8;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;
		margin: 0 20rpx;
	}

	.search-icon {
		font-size: 28rpx;
		color: #999;
		margin-right: 10rpx;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.nav-right {
		display: flex;
		align-items: center;
	}

	.search-btn {
		font-size: 28rpx;
		color: #333;
		margin-right: 20rpx;
	}

	/* .nav-actions {
		display: flex;
		align-items: center;
	}

	.action-icon {
		font-size: 24rpx;
		color: #666;
		margin-left: 15rpx;
	} */

	/* 店铺信息样式 */
	.shop-info {
		display: flex;
		padding: 30rpx;
		background-color: #fff;
		margin-top: 108rpx; /* 为自定义导航栏留出空间 */
		margin-bottom: 20rpx;
	}

	.shop-avatar {
		margin-right: 30rpx;
	}

	.avatar-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
	}

	.shop-details {
		flex: 1;
	}

	.shop-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}

	.shop-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		flex: 1;
	}

	.header-right {
		display: flex;
		align-items: center;
	}

	.shop-arrow {
		font-size: 24rpx;
		color: #999;
		margin-right: 15rpx;
	}

	.shop-arrow {
		font-size: 24rpx;
		color: #999;
	}

	.shop-stats {
		display: flex;
		margin-bottom: 15rpx;
	}

	.stats-text {
		font-size: 26rpx;
		color: #666;
		margin-right: 30rpx;
	}

	.shop-desc {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 20rpx;
	}

	.shop-actions {
		display: flex;
		align-items: center;
	}

	.follow-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ff4444;
		color: #fff;
		border: none;
		border-radius: 20rpx;
		padding: 4rpx 10rpx;
		font-size: 14rpx;
	}

	.follow-icon {
		font-size: 12rpx;
		margin-right: 2rpx;
	}

	.follow-text {
		font-size: 14rpx;
	}

	.follow-btn.followed {
		background-color: #999;
	}

	.shop-actions {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.service-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f8f8f8;
		color: #999;
		border: none;
		border-radius: 25rpx;
		padding: 12rpx 0;
		font-size: 22rpx;
		width: 100%;
		max-width: 300rpx;
	}

	.service-icon {
		font-size: 20rpx;
		margin-right: 8rpx;
	}

	.service-text {
		font-size: 22rpx;
	}

	/* 分类标签样式 */
	.category-tabs {
		display: flex;
		background-color: #fff;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.tab-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0;
		position: relative;
	}

	.tab-text {
		font-size: 28rpx;
		color: #333;
	}

	.tab-item.active .tab-text {
		color: #ff4444;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 4rpx;
		background-color: #ff4444;
	}

	/* 分类列表样式 */
	.category-list {
		background-color: #fff;
		padding: 0 30rpx;
	}

	.category-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.category-name {
		font-size: 28rpx;
		color: #333;
	}

	.category-arrow {
		font-size: 24rpx;
		color: #999;
	}

	/* 商品列表样式 */
	.product-list {
		background-color: #fff;
		padding: 20rpx;
	}

	.search-result-tip {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.tip-text {
		font-size: 26rpx;
		color: #666;
	}

	.clear-search {
		font-size: 26rpx;
		color: #ff4444;
		padding: 5rpx 10rpx;
		border: 1rpx solid #ff4444;
		border-radius: 8rpx;
	}

	.product-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.product-item {
		width: 48%;
		margin-bottom: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.product-image {
		width: 100%;
		height: 300rpx;
		overflow: hidden;
	}

	.product-img {
		width: 100%;
		height: 100%;
	}

	.product-info {
		padding: 20rpx;
	}

	.product-name {
		font-size: 26rpx;
		color: #333;
		line-height: 1.4;
		margin-bottom: 15rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.product-price {
		display: flex;
		align-items: baseline;
		margin-bottom: 15rpx;
	}

	.price-symbol {
		font-size: 24rpx;
		color: #ff4444;
		margin-right: 4rpx;
	}

	.price-value {
		font-size: 32rpx;
		font-weight: bold;
		color: #ff4444;
	}

	.product-stats {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.coupon-tag {
		font-size: 20rpx;
		color: #ff4444;
		background-color: #fff0f0;
		padding: 4rpx 8rpx;
		border-radius: 4rpx;
		margin-right: 10rpx;
	}

	.sales-text, .review-text {
		font-size: 22rpx;
		color: #999;
		margin-right: 15rpx;
	}
</style>
